<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内存泄漏的测试(Testing for Memory Leakage)</title>
  <!-- 
  在JavaScript开发中，内存泄漏是一个常见的问题，它会导致应用程序的性能下降，甚至崩溃。因此，检测和测试内存泄漏是确保应用程序稳定性和性能的重要步骤。
  一、内存泄漏的常见症状
  1. 内存使用量持续增加：
    - 应用程序在运行过程中，内存使用量逐渐增加，而不是保持在一个稳定的水平。

  2. 性能下降：
    - 随着内存使用量的增加，应用程序的响应时间可能会变得缓慢。

  3. 浏览器崩溃：
    - 在极端情况下，内存泄漏可能导致浏览器崩溃或标签页无响应。

  二、检测内存泄漏的方法
  1. 使用浏览器开发者工具：
    - 现代浏览器（如 Chrome、Firefox）都提供了内存分析工具，可以帮助开发者检测内存泄漏。

      在 Chrome 中的步骤：
    - 打开开发者工具（F12 或右键选择“检查”）。
    - 切换到“Performance”或“Memory”选项卡。
    - 使用“Heap Snapshot”功能拍摄快照，比较不同时间点的内存使用情况。
    - 通过“Allocation Timeline”观察内存分配和释放情况。

  2. 拍摄快照：
    - 通过拍摄多个快照，分析对象的数量和大小变化，查找未释放的对象。
    - 比较快照，查看哪些对象仍然存在且不再被使用。

  3. 使用性能分析工具：
    - 一些专门的工具（如  `node --inspect` 、 `memwatch` 、 `clinic.js` ）可以用于检测 Node.js 应用程序中的内存泄漏。

  4. 监控内存使用：
    - 在应用程序中添加内存使用监控代码，定期记录内存使用情况，并在发现异常时进行警告。

  三、编写测试用例
  1. 单元测试：
    - 在单元测试中，创建和销毁组件，确保在不再需要时能够正确释放内存。

  2. 集成测试：
    - 在集成测试中，模拟用户操作，观察内存使用情况，并确保没有内存泄漏。

  四、常见的内存泄漏模式

  1. 全局变量：
    - 不小心创建全局变量，导致引用无法释放。

  2. 未移除的事件监听器：
    - 添加事件监听器后未移除，导致引用保持。

  3. 闭包：
    - 闭包持有不再需要的外部变量引用。

  4. 定时器：
    - 使用定时器后未清除，导致引用保持。

  五、总结
  - 内存泄漏会导致应用程序的性能问题，甚至崩溃，因此及时检测和修复是非常重要的。
  - 使用浏览器开发者工具的内存分析功能可以有效地检测内存泄漏。
  - 通过拍摄快照、监控内存使用和编写测试用例，可以帮助开发者识别和解决内存泄漏问题。
    -->
</head>
<body>

  <button class="create">创建一系列的数组对象</button>
  <button class="destroy">销毁一系列的数组对象</button>

  <script>
    
    function createArray() {
      // 1024 -> 4kb * 1024 -> 4M
      var arr = new Array(1024 * 1024).fill(1);

      function test() {
        console.log(arr);
      }

      return test;
    }

    var arrs = [];

    document.querySelector('.create').onclick = function () {
      for (var i = 0; i < 100; i++) {
        arrs.push(createArray());
      }
      console.log(arrs.length);
    }

    document.querySelector('.destroy').onclick = function () {
      arrs = [];
      // 强制垃圾回收
      // window.gc();
    }
    
  </script>
  
</body>
</html>